<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/common/animate.css"/>
		<!--<link rel="stylesheet" type="text/css" href="../css/common/spinners.css"/>-->
		<link rel="stylesheet" type="text/css" href="../css/common/style.css"/>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/writing.css" />
		<link rel="stylesheet" type="text/css" href="../css/show.css"/>
	</head> 
	<body>
		<!--全局的预加载-->
		<div class="startLoading">
			<div class="scroll_bg">
				<img  src="../images/qr_bg.png"/>
				<img  src="../images/qr_bg.png"/>
			</div>
			<div class="loader4">
	        	<i></i><i></i>
	      	</div>
			<p>Loading...<span>0%</span></p>
		</div>

		<!--*******首页**********-->
		<div class="web_wrap">
			<div class="index_web">
				<!--滚动的彩纸-->
				<div class="scroll_bg">
					<img  src="../images/qr_bg.png"/>
					<img  src="../images/qr_bg.png"/>
				</div>
				<!--内容部分-->
				<div class="content">
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=0 class="guang_card" data-src="../images/guang_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=1 class="guang_card" data-src="../images/zhou_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=2 class="guang_card" data-src="../images/guo_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=3 class="guang_card" data-src="../images/nian_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=4 class="guang_card" data-src="../images/hua1_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=5 class="guang_card" data-src="../images/cheng_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=6 class="guang_card" data-src="../images/kan_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					<div class="hb_list">
						<img class="close" data-src="../images/hongbao_close.png"/>
						<img data-id=7 class="guang_card" data-src="../images/hua2_card.jpg"/>
						<img class= "hongbao_front" data-src="../images/hongbao_front.png"/>
					</div>
					
				</div>
				<div class="footer">
					<div class="btn">
						<img data-src="../images/index_btn_text.png"/>
					</div>
				</div>
			</div>
		</div>
		<!--*************书写页面*********************-->
		<div class="web_wrap writing_web_wrap">
			<div class="writing_web">
				<div id="bg_mask"></div>
				<!--主要绘制区域-->
				<div class="main_text">
					<img id="zi_bg" data-src="../images/guang_ori.png"/>
					<div id="wipe"></div>
				</div>
				<!--成绩,在书写评分以后再显示-->
				<div class="userScore">
					<div class="showScore">90</div>
					<div class="showText">WOW，你的书法已足够登上广州塔享受珠江新城的曼妙夜</div>
				</div>
				<!--底部按钮-->
				<div class="btns">
					<!--书写前的按钮-->
					<div class="beforeWri">
						<div class="btn">
							<img class="yanhua"  data-src="../images/yanhua.png"/>
							<img data-src="../images/writing_btn1.png"/>
						</div>
						<div class="btn">
							<img class="yanhua"  data-src="../images/yanhua.png"/>
							<img data-src="../images/writing_btn2.png"/>
						</div>
						<div class="btn">
							<img class="yanhua"  data-src="../images/yanhua.png"/>
							<img data-src="../images/writing_btn3.png"/>
						</div>
					</div>
					<!--书写后的按钮-->
					<div class="afterWri">
						<div class="btn afterWri_btn">
							<img class="yanhua"  data-src="../images/yanhua.png"/>
							<img data-src="../images/gaosupengyou_btn.png"/>
							
						</div>
						<div class="btn afterWri_btn">
							<img class="yanhua"  data-src="../images/yanhua.png"/>
							<img data-src="../images/writingAgain_btn.png"/>
						</div>
						<div class="ticket">
							<div class="shouxing">
								<img data-src="../images/ticket_shou.png"/>
							</div>
							<p><span>千份鲜花手信全国送</span></p>
						</div>
					</div>
				</div>
				<!--开始绘画前的遮罩-->
				<div class="mask">
					<!--手指动画-->
					<div class="pointer">
						<div class="pointer_circle toScale"></div>
						<div class="pointer_circle toScale"></div>
						<div class="pointer_circle"></div>
						<img data-src="../images/mask_pointer.png"/>
						<img data-src="../images/mask_text.png"/>
					</div>
					<!--书写完成后计算分数的遮罩-->
					<div class="waiting">
						<p>分数计算中,新年快乐...</p> 
						<div class="waiting_hua">
							<img data-src="../images/waiting_hua.png"/>
						</div>
						<!--<span class="loading line"></span>-->
					</div>
					<!--提示分享页动画-->
					<div class="share">
						<img data-src="../images/share_jiantou.png"/>
					</div>
				</div>
			</div>
		</div>
		
		<!--**********展示页*****************-->
		<div class="web_wrap show_web_wrap">
			<div class="show_web">
			<!--滚动的彩纸-->
			<div class="scroll_bg">
				<img  data-src="../images/qr_bg.png"/>
				<img  data-src="../images/qr_bg.png"/>
			</div>
			<!--内容部分-->
			<div class="content">
				<!--用户写的字***-->
				<div id="targetImg_bg" class="targetImg_bg"></div>
				<div class="targetIMg">
					<img id="show_wenzi" data-src="../images/show_guang.png"/>
				</div>
				<div class="top_text">
					<ul>
						<li><img data-src="../images/show_guang.png"/></li>
						<li><img data-src="../images/show_zhou.png"/></li>
						<li><img data-src="../images/show_guo.png"/></li>
						<li><img data-src="../images/show_nian.png"/></li>
					</ul>
				</div>				
				<div class="welcome">
					<img data-src="../images/show_welcom.png"/>
					<div class="wel_second">
						<img data-src="../images/show_g.png"/>
						<img data-src="../images/show_z.png"/>
						<img data-src="../images/show_qr.png"/>
					</div>
				</div>
				<div class="bottom_text">
					<ul>
						<li><img data-src="../images/show_hua1.png"/></li>
						<li><img data-src="../images/show_cheng.png"/></li>
						<li><img data-src="../images/show_kan.png"/></li>
						<li><img data-src="../images/show_hua1.png"/></li>
					</ul>
				</div>
				<div class="btn">
					<a href="qr_code.html">
						<img data-src="../images/show_btn_text.png"/>
					</a>
				</div>
			</div>
			<div class="footer">
				<img data-src="../images/qr_fotter_img.png"/>
				
			</div>
		</div>	
		</div>
		
		<script src="../js/preloadjs-0.6.2.min.js"></script>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/TweenMax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var curIndex;	//用户选择的场景
			var userScore = 0;	//用户写字分数
			var share_link="";		//分享的链接
			var share_title="";//分享文案
			var hongbao_open_src="../images/hongbao_open.png"
			var hongbao_close_src="../images/hongbao_close.png"
			var path = "..";//用来套后台后添加路径
			var textArr = [
				["../images/guang_ori.png",'../images/guang_bg.jpg','../images/canvas/zi1.png'],
				["../images/zhou_ori.png",'../images/zhou_bg.jpg','../images/canvas/zi2.png'],
				["../images/guo_ori.png",'../images/guo_bg.jpg','../images/canvas/zi3.png'],
				["../images/nian_ori.png",'../images/nian_bg.jpg','../images/canvas/zi4.png'],
				["../images/hua1_ori.png",'../images/hua1_bg.jpg','../images/canvas/zi5.png'],
				["../images/cheng_ori.png",'../images/cheng_bg.jpg','../images/canvas/zi6.png'],
				["../images/kan_ori.png",'../images/kan_bg.jpg','../images/canvas/zi7.png'],
				["../images/hua2_ori.png",'../images/hua2_bg.jpg','../images/canvas/zi8.png']
			]
			var scoreText = [
				"噢漏，你的书法正流连在夜游珠江的浪漫里不想下船",
				"噢漏，你的书法正停留在上下九的美食店里停不下嘴",
				"噢漏，你的书法正在百万葵园的绝色花丛里迷了眼",
				"噢漏，你的书法正挂在黄埔古港的牌坊上俯瞰戎马前事",
				"噢漏，你的书法需要在长隆乐园的欢乐中体验心跳加速的刺激",
				"WOW，你的书法已足够在广州大剧院的文艺气流里回旋跳跃",
				"WOW，你的书法已足够在广州图书馆的智慧库里吸取精华无数",
				"WOW，你的书法已足够登上越秀山与五羊共舞春秋年华",
				"WOW，你的书法已足够登上广州塔享受珠江新城的曼妙夜色",
				"WOW，你的书法已足够登上白云山顶一览羊城好风光"
			]
		</script>
		
		
		
		<script src="../js/bgg_wipe2.js"></script>
		<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/writing.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
